<template>
  <div class="app-container partTimeAdd" style="display: flex; justify-content: center; padding: 40px; padding-left: 0px; padding-right: 140px;padding-top: 50px">
    <el-form :model="queryParam" ref="form" label-width="100px" v-loading="formLoading" :rules="rules" style="width: 60%">
      <el-form-item label="员工：" class="empNm" required>
        <el-select v-model="queryParam.userId" filterable placeholder="请选择（或输入）员工" clearable>
          <el-option
            v-for="item in partEmpList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :title="item.name">
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门：" class="empNm2" required>
        <el-select v-model="queryParam.deptId" filterable placeholder="请选择（或输入）部门" clearable>
          <el-option
            v-for="item in partDeptList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :title="item.name">
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
            
      <el-form-item style="margin-top: 40px; display: flex; justify-content: center;" class="footerItem">
        <el-button type="info"  style="margin-right: 6px" @click="$router.push( { path: '/user/student/partTime' })">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import partApi from '@/api/parttime'

export default {
  components: { Pagination },
  data () {
    return {
      partEmpList: [],
      partDeptList: [],
      rules:  {
        userId: [
          { required: true, message: '请选择（或输入）员工', trigger: ['blur','change'] }
        ],
        deptId: [
          { required: true, message: '请选择（或输入）部门', trigger: ['blur','change'] }
        ]
      },
      queryParam: {
        userId: undefined,
        deptId: undefined
      }
    }
  },
  created () {
    this.loadAll()
  },
  methods: {
    resetForm() {
      this.queryParam = {
      userId: undefined,
      deptId: undefined
      }
    },
    loadAll() {
      partApi.getEmployeeFilterList().then(res => {
        this.partEmpList = res.response
      })

      partApi.getDepartsFilterList().then(res => {
        this.partDeptList = res.response
      })
    },
    submitForm () {
      let _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          partApi.addPartTime(this.queryParam).then(re => {
            if (re.code === 1) {
              _this.$message.success('兼职信息添加成功!')
              this.$router.push('/user/student/partTime')
            } else {
              _this.$message.error(re.message)
              _this.resetForm()
            }
          }).catch(e => {
            console.log('error:', e)
          }).finally(() => {
            _this.resetForm()
          })
        } else {
          return false
        }
      })
    }
  },
  computed: {
  }
}
</script>

<style rel="stylesheet/scss" lang='scss'>
  .partTimeAdd {
    padding: 30px;
  }

  .partTimeAdd .el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
    margin-left: 12px;
  }

  .partTimeAdd .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 2px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .partTimeAdd .el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: bold;
    text-align: center;
  }

  .partTimeAdd .el-date-editor .el-range-separator {
    display: inline-block;
    height: 100%;
    padding: 0 5px;
    margin: 0;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    width: 6%;
    color: #303133;
  }
  
  .partTimeAdd .el-autocomplete {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  
  .partTimeAdd .el-select {
    display: inline-block;
    position: relative;
    width: 100%;
  }

  .partTimeAdd .el-form-item {
    margin-bottom: 12px;
  }

  .partTimeAdd .el-input-number--medium {
    width: 100%;
    line-height: 34px;
  }

  .partTimeAdd .el-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 0px;
    position: absolute;
    top: 100%;
    left: 0;
  }

  .partTimeAdd .footerItem .el-form-item__content {
    margin-left: 60px !important;
  }

</style>
